<template>
	<!-- 推广中心 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topnav">
			<navigator open-type="navigateBack">
				<image src="/static/images/back_white.png"></image>
			</navigator>
			<view class="title">推广中心</view>
			<view class="userinfos">
				<view class="user">
					<image :src="promotionInfo.avatar" class="avatar"></image>
					<view class="userinfo">
						<view class="userinfo_top">
							<view class="userinfo_top_name">{{promotionInfo.user_name}}</view>
							<view class="userinfo_top_phone">{{promotionInfo.phone}}</view>
						</view>
						<view class="userinfo_bot">
							<view class="userinfo_bot_level">
								<text>{{promotionInfo.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 收益 -->
			<view class="profit">
				<view class="profit_item">
					<view class="profit_item_num">¥ {{promotionInfo.promotion_revenue || 0}}</view>
					<view class="profit_item_title">推广总收益</view>
				</view>
				<view class="profit_item">
					<view class="profit_item_num">{{totalpeople || 0}}</view>
					<view class="profit_item_title">推广人数</view>
				</view>
				<view class="profit_item">
					<view class="profit_item_num">¥ {{promotionInfo.cashable_income || 0}}</view>
					<view class="profit_item_title">可提现收益</view>
				</view>
			</view>
		</view>
		<!-- 功能 -->
		<view class="main">
			<navigator class="item" url="./myteam">
				<view class="item_title">
					<image src="/static/images/mine/team.png"></image>
					<text>我的团队</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="item" :url="`./profit?profit=${promotionInfo.promotion_revenue}`">
				<view class="item_title">
					<image src="/static/images/mine/profit.png"></image>
					<text>收益记录</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<view class="item" @tap="getShareInfo">
				<view class="item_title">
					<image src="/static/images/mine/code.png"></image>
					<text>推广码</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</view>
			<view class="line"></view>
			<navigator class="item" :url="`./withdrawal?withdrawalAmount=${promotionInfo.cashable_income}`">
				<view class="item_title">
					<image src="/static/images/mine/withdrawal.png"></image>
					<text>我要提现</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				promotionInfo:{
					avatar:'',
					user_name:'',
					name:'',//	推广等级
					cashable_income:'0',//可提现收益
					promotion_revenue:'0'//推广总收益
				},//推广信息
				totalpeople:'0'//推广总人数
			}
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			getInfo(){
				this.$api.sharesharelis().then(res=>{
					this.promotionInfo = res.my;
					this.totalpeople = res.total_people;
				})
			},
			
			getShareInfo(){
				console.log("ahhah")
				this.$api.shareInfo().then(res=>{
					if(res*1 == 0){
						uni.showModal({
							title: '温馨提示',
							content: '您还不具备推广权限',
							success: res => {
								
							}
						});	
					}else{
						uni.navigateTo({
							url: `/pages/mine/promotionCenter/promotionCode`
						});
					}
					
				})
			}
	

		}
	}
</script>

<style lang="scss">
.topnav{
	width: 750rpx;
	height: 693rpx;
	background-size: 100% 100%;
	padding: calc(var(--status-bar-height) + 50rpx) 30rpx 50rpx;
	box-sizing: border-box;
	position: relative;
	background-image: url("../../../static/images/oneImage/beijingw.png");
	
	navigator{
		position: absolute;
		
		image {
			width: 22rpx;
			height: 40rpx;
		}
	}
	.title {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
	.userinfos{
		@include between;
		margin: 50rpx 0;
		
		.user{
			@include align-center;
			
			.avatar{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.userinfo{
				margin-left: 30rpx;
				
				&_top{
					@include align-center;
					
					&_name{
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FFFFFF;
					}
					&_phone{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 33rpx;
					}
				}
				&_bot{
					@include align-center;
					margin-top: 32rpx;
					
					&_level{
						width: 190rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 30rpx;
						@include center;
						
						text{
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-left: 11rpx;
						}
					}
				}
			}
		}
	}
}
.profit{
	width: 690rpx;
	background: rgba(255,255,255,0.3);
	border-radius: 20rpx;
	padding: 42rpx 80rpx;
	@include between;
	
	&_item{
		@include column-center;
		
		&_num{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
		}
		&_title{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 30rpx;
		}
	}
}
.main{
	width: 690rpx;
	height: 630rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 0 30rpx;
	transform: translateY(-70rpx);
	
	.item{
		@include between;
		
		&_title{
			@include between;
			
			image{
				width: 40rpx;
				height: 40rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}
		}
		&_more{
			width: 12rpx;
			height: 24rpx;
		}
	}
	.line{
		width: 630rpx;
		height: 1rpx;
		background: #E5E5E5;
		margin: 26rpx 0;
	}
}
</style>
